<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
 <#include "/header.ftl">
    <style>


        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>课程评价</h1>
    <div>
        <div class="maintable">
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 950; " :row-class-name="tableRowClassName">
                <el-table-column
                        prop="courseId"
                        label="课程编号"
                        width="200">

                </el-table-column>
                <el-table-column
                        prop="courseName"
                        label="课程名称"
                        width="200">
                </el-table-column>


                <el-table-column
                        prop="teacherRealName"
                        label="授课老师"
                        width="200">
                    <template slot-scope="scope">
                        {{scope.row.teacher.teacherRealname}}
                    </template>
                </el-table-column>

                <el-table-column
                        prop="courseScore"
                        label="学分"
                        width="150">
                </el-table-column>
                <el-table-column
                        label="课程评价"
                        width="150"
                >
                    <template slot-scope="scope">
                        <el-button type="primary" @click="courseEvaluate(scope.row)">课程评价</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="pageIndex"
                        :page-size="pageSize"
                        layout="prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <el-dialog title="评价" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="个人评价"
                              prop="classEvaluateContent"
                              :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.classEvaluateContent" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</div>
<#include "/footer.ftl">
<script>
    let _this = new Vue({
        el: '#app',
        data: {
            pageIndex: 1,
            pageSize: 5,
            total: 0,
            courseId: 1,
            tableData: [],
            dialogFormVisible: false,
            form: {
                classEvaluateContent: ''
            },
            formLabelWidth: '120px'
        },
        created: function () {
            this.getListCourse();
        },
        methods: {
            courseEvaluate: function (row) {
                this.dialogFormVisible = true;
                this.courseId = row.courseId;
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleSizeChange(val) {
            },
            handleCurrentChange(val) {
                this.pageIndex = val;
                this.getListCourse()
            },
            submitForm() {
                this.dialogFormVisible = false;
                $.ajax({
                    type: 'post',
                    url: '/api/student/saveCourseEvaluate',
                    data: {
                        courseId: this.courseId,
                        classEvaluateContent: this.form.classEvaluateContent
                    },
                    dataType: 'json',
                    success: function (res) {
                        if (res.status == 200) {
                            _this.$message({
                                showClose: true,
                                message: res.message,
                                type: 'success'
                            })
                        } else {
                            _this.$message({
                                showClose: true,
                                message: res.message,
                                type: 'error'
                            });
                        }
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })
            },
            handleCurrentChange(val) {
                this.pageIndex = val;
                this.getListCourse();
            },
            getListCourse() {
                $.ajax({
                    type: 'post',
                    url: '/api/student/listCourse',
                    data: {pageIndex: this.pageIndex},
                    success: function (res) {
                        _this.tableData = res.resData.list;
                        _this.pageSize = res.resData.pageSize;
                        _this.total = res.resData.total;
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })
            }
        }
    })
</script>
</body>
</html>
